import { Row, Col, Input, Select, DatePicker, Button } from 'apusic-ui';
import moment from 'moment';
import { SyncOutlined } from '@ant-design/icons';
import HeaderGrid from './index';
import './index.css'

const { Option } = Select
const { RangePicker } = DatePicker;

const Example = () => {
  return (
    <>
      <HeaderGrid>
        <Col span={5} offset={1}>
          <Row wrap={false} align="middle">
            <Col flex="36px" className="flex-0">
              <label>集群</label>
            </Col>
            <Col flex="auto">
              <Select className="percent-100" placeholder="请选择集群">
                <Option value="cluster1">cluster1</Option>
                <Option value="cluster2">cluster2</Option>
              </Select>
            </Col>
          </Row>
        </Col>
        <Col span={5}>
          <Row wrap={false} align="middle">
            <Col flex="36px" className="flex-0">
              <label>租户</label>
            </Col>
            <Col flex="auto" placeholder="请选择租户">
              <Select className="percent-100">
                <Option value="cluster1">cluster1</Option>
                <Option value="cluster2">cluster2</Option>
              </Select>
            </Col>
          </Row>
        </Col>
        <Col span={5}>
          <Row wrap={false} align="middle">
            <Col flex="60px" className="flex-0">
              <label>命名空间</label>
            </Col>
            <Col flex="auto">
              <Select className="percent-100" placeholder="请选择命名空间">
                <Option value="cluster1">cluster1</Option>
                <Option value="cluster2">cluster2</Option>
              </Select>
            </Col>
          </Row>
        </Col>
        <Col span={4}>
          <Input.Search placeholder="请选择主题名称" />
        </Col>
      </HeaderGrid >
      <HeaderGrid>
        <Col span={4}>
          <Row wrap={false} align="middle">
            <Col flex="36px" className="flex-0">
              <label>集群</label>
            </Col>
            <Col flex="auto">
              <Select className="percent-100" placeholder="请选择集群">
                <Option value="cluster1">cluster1</Option>
                <Option value="cluster2">cluster2</Option>
              </Select>
            </Col>
          </Row>
        </Col>
        <Col span={3}>
          <Select className="percent-100" defaultValue="0">
            <Option value="0">近1小时</Option>
            <Option value="1">近24小时</Option>
            <Option value="1">近3天</Option>
            <Option value="1">近7天</Option>
          </Select>
        </Col>
        <Col span={3}>
          <Select className="percent-100" defaultValue="0">
            <Option value="0">分钟</Option>
            <Option value="1">小时</Option>
            <Option value="2">天</Option>
          </Select>
        </Col>
        <Col span={6}>
          <RangePicker className="percent-100" defaultValue={[moment('2023/05/22', 'YYYY/MM/DD'), moment('2023/05/22', 'YYYY/MM/DD')]} format={'YYYY/MM/DD'} />
        </Col>
        <Col span={4}>
          <Row justify="end" wrap={false}>
            <Col flex="auto">
              <Select className="percent-100" defaultValue="10">
                <Option value="10">10s</Option>
                <Option value="20">20s</Option>
              </Select>
            </Col>
            <Col flex="46px" className="btn-col">
              <Button type="text" icon={<SyncOutlined />}>
                <span className="btn-flex-0">刷新</span>
              </Button>
            </Col>
          </Row>
        </Col>
      </HeaderGrid >
    </>
  )
};

export default Example;
